import { Component } from "react";
import './evaluate.css'
class evaluate extends Component {
    constructor() {
        super()
        this.state = {
            name: '',
            content: '',
            lists: [
                { name: 'yy', text: '演唱会!!' }
            ]
        }
    }
    getname = (e) => {
        // console.log(e.target.value);
        this.setState({
            name:e.target.value
        })
    }
    getping = (e) => {
        // console.log(e.target.value);
        this.setState({
            content:e.target.value
        })
    }
    publish=()=>{
        // console.log(this.state);
        let newArray=[...this.state.lists,{name:this.state.name,text:this.state.content}]
        this.setState({
            lists:newArray
        })
    }
    del=(index)=>{
        // console.log(index);
        // console.log(this.state.lists);
        this.state.lists.splice(index,1)
        this.setState({
            lists:this.state.lists
        })
    }
    render() {
        return (
            <div className="body">
                <div className="box">
                    <input className="box-input"  type="text" placeholder="请输入评论人" onChange={(e) => this.getname(e)} />
                    <textarea className="box-text" placeholder="请输入评价内容" cols="30" rows="10" onChange={(e) => this.getping(e)}>

                    </textarea>
                    <button onClick={()=>this.publish()}>发表评论</button>
                    <div className="list">
                        {
                            this.state.lists.map((item, index) => {
                                return <div className="list-box" key={index}>
                                            <div className="ren">评论人：{item.name}</div>
                                            <div className="lun">评论内容：{item.text}</div>
                                            <div className="del">
                                                <button onClick={()=>this.del(index)}>删除</button>
                                            </div>
                                         </div>
                            })

                        }
                    </div>
                </div>
            </div>
        )
    }
}
export default evaluate